<template>
	<div align="center" class="sxqm">
		<div class="imagesize">
			<canvas id="myCanvas" width="300px" height="300px" style="border:1px solid rgba(151,151,151,1);"></canvas>
		</div>
		<div class="op">
			<button type="button" class="btn1" @click="clearArea()">清除</button>
			<button type="button" class="btn2" @click="saveImageInfo()">确定</button>
			<!--<button type="button" class="btn" @click="back()">返回</button>-->
		</div>
		<!--<span class="span">线条宽度:</span>-->
		<!--<select id="selWidth" @change="changewidth()" class="zselect">-->
		<!--<option value="1">1</option>-->
		<!--<option value="3" selected="selected">3</option>-->
		<!--<option value="5">5</option>-->
		<!--<option value="7">7</option>-->
		<!--<option value="9">9</option>-->
		<!--<option value="11">11</option>-->
		<!--</select>-->
		<!--<span class="span">线条颜色:</span>-->
		<!--<select id="selColor"  @change="changecolor()" class="zselect">-->
		<!--<option value="black" selected="selected">black</option>-->
		<!--<option value="blue">blue</option>-->
		<!--<option value="red">red</option>-->
		<!--<option value="green">green</option>-->
		<!--<option value="yellow">yellow</option>-->
		<!--<option value="gray">gray</option>-->
		<!--</select>-->
		<div class="imagesize" v-show="false">
			<img :src="image" class="cimage" v-show="image" />
		</div>
	</div>
</template>

<script>
export default {
	name: 'sxqm',
	data() {
		return {
			mousePressed: false,
			lastX: null,
			lastY: null,
			selected1: 7,
			selected2: 'red',
			image: null
		};
	},
	/*初始化*/
	mounted() {
		this.init();
	},
	methods: {
		/*返回*/
		back() {
			//子组件往父组件传值
			this.$emit('sxqmcode', { image: this.image });
		},
		/*清空画板*/
		clearArea() {
			var ctx = document.getElementById('myCanvas').getContext('2d');
			// Use the identity matrix while clearing the canvas
			ctx.setTransform(1, 0, 0, 1, 0, 0);
			ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
			// 清除签名图片
			this.image = null;
		},
		/*保存图片*/
		saveImageInfo() {
			var c = document.getElementById('myCanvas');
			var image = c.toDataURL('image/png');
			this.image = image;
			this.$emit('sxqmcode', { image: this.image });
		},

		/*修改线条颜色*/
		changecolor() {
			var sel2 = document.getElementById('selColor');
			var value = sel2.selectedIndex;
			return (this.selected2 = sel2[value].value);
		},

		/*修改线条宽度*/
		changewidth() {
			var sel = document.getElementById('selWidth');
			var value = sel.selectedIndex;
			return (this.selected1 = sel[value].value);
		},

		/*绘制图*/
		Draw(x, y, isDown) {
			var ctx = document.getElementById('myCanvas').getContext('2d');
			if (isDown) {
				ctx.beginPath();
				ctx.strokeStyle = this.selected2;
				ctx.lineWidth = this.selected1;
				ctx.lineJoin = 'round';
				ctx.moveTo(this.lastX, this.lastY);
				ctx.lineTo(x, y);
				ctx.closePath();
				ctx.stroke();
			}
			this.lastX = x;
			this.lastY = y;
		},

		/*初始化*/
		init() {
			var self = this;
			//			触摸屏
			var c = document.getElementById('myCanvas');
			c.addEventListener(
				'touchstart',
				function(event) {
					console.log(1);
					if (event.targetTouches.length == 1) {
						event.preventDefault(); // 阻止浏览器默认事件，重要
						var touch = event.targetTouches[0];
						self.mousePressed = true;
						self.Draw(touch.pageX - this.offsetLeft, touch.pageY - this.offsetTop, false);
					}
				},
				false
			);

			c.addEventListener(
				'touchmove',
				function(event) {
					console.log(2);
					if (event.targetTouches.length == 1) {
						event.preventDefault(); // 阻止浏览器默认事件，重要
						var touch = event.targetTouches[0];
						if (self.mousePressed) {
							self.Draw(touch.pageX - this.offsetLeft, touch.pageY - this.offsetTop, true);
						}
					}
				},
				false
			);

			c.addEventListener(
				'touchend',
				function(event) {
					console.log(3);
					if (event.targetTouches.length == 1) {
						event.preventDefault(); // 阻止浏览器默认事件，防止手写的时候拖动屏幕，重要
						//      			var touch = event.targetTouches[0];
						self.mousePressed = false;
					}
				},
				false
			);
			/*c.addEventListener('touchcancel', function (event) {
                console.log(4)
                mousePressed = false;
            },false);*/

			//		   鼠标
			c.onmousedown = function(event) {
				self.mousePressed = true;
				self.Draw(event.pageX - this.offsetLeft, event.pageY - this.offsetTop, false);
			};

			c.onmousemove = function(event) {
				if (self.mousePressed) {
					self.Draw(event.pageX - this.offsetLeft, event.pageY - this.offsetTop, true);
				}
			};
			// eslint-disable-next-line no-unused-vars
			c.onmouseup = function(event) {
				self.mousePressed = false;
			};
		}
	}
};
</script>

<style scoped>
html,
body {
	margin: 0;
	padding: 0;
}
.canvas {
	width: 500px;
	height: 300px;
	border: 1px solid #6699cc;
}

.saveimgs span {
	display: inline-block;
	margin-top: 5px;
}
.sxqm {
	width: 100%;
	height: 100%;
	margin-top: 5%;
	/*display: flex;*/
	/*flex-direction: column;*/
	/*justify-content: center;*/
	/*align-items: center;*/
}
.btn {
	width: 80px;
	height: 40px;
	border-radius: 5px;
	margin-bottom: 3%;
	margin-left: 3%;
	font-size: 16px;
	line-height: 40px;
}

.btn1 {
	width: 80px;
	height: 40px;
	border-radius: 4px;
	margin-right: 30px;
	border: 0px solid rgba(102, 102, 102, 1);
	color: rgba(88, 88, 88, 1);
	font-size: 14px;
}
.btn2 {
	width: 80px;
	height: 40px;
	background: rgba(0, 194, 255, 1);
	border-radius: 4px;
	color: white;
	font-size: 14px;
	border: 0px;
}

.op {
	margin-top: 2%;
	width: 300px;
	height: 50px;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}

.imagesize {
	width: 100%;
	height: 300px;
}

.span {
	font-size: 20px;
	color: #df5000;
	height: 30px;
	line-height: 30px;
}

.zselect {
	height: 30px;
	line-height: 30px;
	width: 150px;
	text-align: center;
	margin-right: 20px;
}

.cimage {
	width: 300px;
	height: 300px;
	margin-top: 10px;
	border: 1px solid rgba(151, 151, 151, 1);
}
</style>
